<template>
  <div class="icon-selector-warp-row">
    <div class="icon-scroll-container" ref="scrollContainerRef">
      <div class="icon-grid" v-if="props.list.length > 0">
        <div
          class="icon-item"
          v-for="v in list"
          :key="v"
          :class="{ 'icon-item-active': prefix === v }"
          :role="'option'"
          :aria-selected="prefix === v"
          :aria-label="`选择图标 ${v}`"
          :tabindex="0"
          @mousedown="onColClick(v as string)"
          @keydown="onItemKeyDown(v as string, $event)"
        >
          <SvgIcon :name="v as string" :aria-hidden="true" />
        </div>
      </div>
      <div class="icon-empty" v-if="list.length <= 0">
        <div class="empty-icon">📋</div>
        <div class="empty-text">{{ empty }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
// SvgIcon 已在 main.ts 中全局注册，无需引入

// 定义父组件传过来的值
const props = withDefaults(
  defineProps<{
    // 图标列表数据
    list?: string[];
    // 自定义空状态描述文字
    empty?: string;
    // 高亮当前选中图标
    prefix?: string;
    // 是否显示加载状态
    loading?: boolean;
    // 每行显示的图标数量
    columns?: number;
    // 图标间距
    gutter?: number;
  }>(),
  {
    list: () => [],
    empty: '无相关图标',
    prefix: '',
    loading: false,
    columns: 6,
    gutter: 10,
  }
);

// 定义子组件向父组件传值/事件
const emit = defineEmits(['get-icon']);

// 滚动容器引用
const scrollContainerRef = ref<HTMLElement>();

// 当前 icon 图标点击时
const onColClick = (v: string) => {
  emit('get-icon', v);
};

// 键盘导航处理
const onItemKeyDown = (v: string, event: KeyboardEvent) => {
  switch (event.key) {
    case 'Enter':
    case ' ':
      // Enter 或空格键选择图标
      event.preventDefault();
      onColClick(v);
      break;
    case 'Escape':
      // ESC 键关闭选择器
      event.preventDefault();
      (event.target as HTMLElement).blur();
      break;
  }
};
</script>

<style lang="scss">
.icon-selector-warp-row {
  height: 230px;
  overflow: hidden;
  border-radius: 6px;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

  .icon-scroll-container {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px;

    // 自定义滚动条样式
    &::-webkit-scrollbar {
      width: 6px;
    }

    &::-webkit-scrollbar-track {
      background: #f1f1f1;
      border-radius: 3px;
    }

    &::-webkit-scrollbar-thumb {
      background: #c1c1c1;
      border-radius: 3px;

      &:hover {
        background: #a8a8a8;
      }
    }

    // Firefox 滚动条样式
    scrollbar-width: thin;
    scrollbar-color: #c1c1c1 #f1f1f1;
  }

  .icon-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    padding: 0;
  }

  .icon-item {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #e4e7ed;
    border-radius: 5px;
    height: 40px;
    cursor: pointer;
    pointer-events: auto;
    user-select: none;
    transition: all 0.3s ease;
    background-color: #fff;

    i {
      font-size: 20px;
      color: #606266;
      pointer-events: none;
      transition: color 0.3s ease;
    }

    &:hover {
      cursor: pointer;
      background-color: #f0f9ff;
      border: 1px solid #b3d8ff;
      transform: translateY(-1px);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

      i {
        color: #409eff;
      }
    }

    &:focus {
      outline: 2px solid #409eff;
      outline-offset: 2px;
    }
  }

  .icon-item-active {
    background-color: #f0f9ff;
    border: 1px solid #b3d8ff;

    i {
      color: #409eff;
    }
  }

  .icon-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #909399;
    padding: 20px;

    .empty-icon {
      font-size: 48px;
      margin-bottom: 12px;
      opacity: 0.6;
    }

    .empty-text {
      font-size: 14px;
      text-align: center;
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .icon-selector-warp-row {
    height: 160px;

    .icon-scroll-container {
      padding: 8px;
    }

    .icon-grid {
      grid-template-columns: repeat(4, 1fr);
      gap: 6px;
    }

    .icon-item {
      height: 36px;

      i {
        font-size: 16px;
      }
    }

    .icon-empty {
      .empty-icon {
        font-size: 36px;
      }

      .empty-text {
        font-size: 12px;
      }
    }
  }
}
</style>
